﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>生产工单添加表单</title>
    <!-- 引用本地 layui.css -->
    <link href="~/lib/layuiadmin/layui/css/layui.mobile.css" rel="stylesheet" />
    <link href="~/lib/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>

    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f4f4f4; /* 可根据需要调整背景颜色 */
        }

        .layui-form {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 80%; /* 可根据需要调整表单宽度 */
            max-width: 1200px; /* 可根据需要调整表单最大宽度 */
        }

        /* 避免表单标签换行 */
        .layui-form-label {
            white-space: nowrap;
            overflow: visible;
            text-overflow: clip;
        }

        /* 为输入框和选择框设置最小宽度 */
        .layui-input-inline {
            min-width: 200px; /* 可根据实际情况调整 */
        }

        /* 避免表格单元格内容换行 */
        .layui-table td {
            white-space: nowrap;
            overflow: visible;
            text-overflow: clip;
        }


            /*工艺流程相关样式*/

            /* 固定列样式 */
            .layui-table th.sticky-col,
            .layui-table td.sticky-col {
                position: sticky;
                background-color: #fff;
                z-index: 1;
            }

            /* 左侧固定列 */
            .layui-table th:first-child,
            .layui-table td:first-child {
                left: 0;
                box-shadow: 2px 0 4px rgba(0,0,0,0.1);
            }

            /* 右侧固定列 */
            .layui-table th:last-child,
            .layui-table td:last-child {
                right: 0;
                box-shadow: -2px 0 4px rgba(0,0,0,0.1);
            }
    </style>
</head>

<body>
    <form class="layui-form">
        <a href="http://localhost:5223/workorder/scworkorderquery" class="back-button">返回主页面</a>
        <!-- 基础信息部分 -->
        <div class="layui-form-item">
            <label class="layui-form-label">基础信息</label>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">工单名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="workOrderName" id="workOrderName" lay-verify="required"
                               autocomplete="off" class="layui-input" >
                        <span class="layui-form-mid layui-word-aux">
                            <input type="checkbox" name="systemNumber" lay-filter="systemNumber"
                                   title="系统编号" checked lay-skin="primary">
                        </span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">* 关联生产单号</label>
                    <div class="layui-input-inline">
                        <select name="associatedProductionOrderNumber" id="associatedProductionOrderNumber" lay-verify="required" lay-search>
                            <option value="">请选择生产单号</option>
                        </select>
                        <i class="layui-icon layui-icon-clipboard"></i>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">关联项目</label>
                    <div class="layui-input-inline">
                        <select name="associatedProject" id="associatedProject" lay-verify="required" lay-search>
                            <option value="">请选择项目名称</option>
                            <option value="项目A">项目A</option>
                            <option value="项目B">项目B</option>
                            <option value="项目C">项目C</option>
                            <option value="项目D">项目D</option>
                            <option value="项目E">项目E</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">负责人</label>
                    <div class="layui-input-inline">
                        <input type="text" name="personinCharge" id="personinCharge" placeholder="请选择负责人" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea name="remarks" id="remarks" placeholder="请输入备注" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
               
                <div class="layui-form-item">
                    <label class="layui-form-label">销售订单</label>
                    <div class="layui-input-inline">
                        <input type="text" name="salesOrder" placeholder="请选择销售单号" autocomplete="off"
                               class="layui-input" id="salesOrder" lay-reqtext="请填写销售订单号">
                        <i class="layui-icon layui-icon-clipboard"></i>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">工单日期</label>
                    <div class="layui-input-inline" style="position: relative;">
                        <!-- 新增定位上下文 -->
                        <input type="text"
                               name="workOrderDate"
                               placeholder="请选择日期"
                               autocomplete="off"
                               class="layui-input"
                               id="workOrderDate"
                               style="padding-right: 28px;"> <!-- 增加右侧内边距 -->
                        <i class="layui-icon layui-icon-date"
                           style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); pointer-events: none;"></i>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">所属部门</label>
                    <div class="layui-input-inline">
                        <select name="affiliatedDepartment" id="affiliatedDepartment" lay-verify="required" lay-search>
                            <option value="">请选择部门</option>
                            <option value="设计部">设计部</option>
                            <option value="采购部">采购部</option>
                            <option value="计划部">计划部</option>
                            <option value="设备部">设备部</option>
                            <option value="质量部">质量部</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- 生产物品部分 -->
        <div class="layui-form-item">
            <label class="layui-form-label">生产物品</label>
        </div>
        <div class="layui-row layui-col-space15" id="wupinLiST">
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">* 物品名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="itemName" id="itemName" placeholder="请输入" autocomplete="off"
                               class="layui-input" readonly>
                       @*  <i class="layui-icon layui-icon-box"></i> *@
                        <button type="button" class="layui-btn layui-btn-xs selectMaterialButton">选择物品</button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">规格型号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="specification" id="specification" placeholder="请输入" autocomplete="off"
                               class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">物品类别</label>
                    <div class="layui-input-inline">
                        <input type="text" name="itemCategory" id="itemCategory" placeholder="请输入" autocomplete="off"
                               class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">计划开始时间</label>
                    <div class="layui-input-inline" style="position: relative;">
                        <!-- 新增定位上下文 -->
                        <input type="date"
                               name="plannedStartTime"
                               placeholder="请选择日期"
                               autocomplete="off"
                               class="layui-input"
                               id="plannedStartTime"
                               style="padding-right: 28px;"> <!-- 增加右侧内边距 -->
                        <i class="layui-icon layui-icon-date"
                           style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); pointer-events: none;"></i>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">计划产量</label>
                    <div class="layui-input-inline">
                        <input type="number" name="plannedOutput" id="plannedOutput" placeholder="请输入计划生成量" autocomplete="off"
                               class="layui-input" >
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">物品编号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="itemNumber" id="itemNumber" placeholder="请输入" autocomplete="off"
                               class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">单位</label>
                    <div class="layui-input-inline">
                        <input type="text" name="unit" id="unit" placeholder="请输入" autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">物品分类</label>
                    <div class="layui-input-inline">
                        <input type="text" name="itemClassification" id="itemClassification" placeholder="请输入" autocomplete="off"
                               class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">计划结束时间</label>
                    <div class="layui-input-inline" style="position: relative;">
                        <!-- 新增定位上下文 -->
                        <input type="date"
                               name="plannedEndTime"
                               placeholder="请选择日期"
                               autocomplete="off"
                               class="layui-input"
                               id="plannedEndTime"
                               style="padding-right: 28px;"> <!-- 增加右侧内边距 -->
                        <i class="layui-icon layui-icon-date"
                           style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); pointer-events: none;"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 工艺流程部分 -->
        <div class="layui-form-item">
            <label class="layui-form-label">工艺流程</label>
        </div>
        <div id="processFlowTable" style="width: 100%; overflow-x: auto;">
            <table class="layui-table" style="min-width: 1600px;">
                <thead>
                    <tr>
                        <th style="position: sticky; left: 0; background: #fff; z-index: 1;">序号</th>
                        <th>工序编码</th>
                        <th>工序名称</th>
                        <th>加工顺序</th>
                        <th>工艺流程</th>
                        <th>负责人</th>
                        <th>所在部门</th>
                        <th>计划开始时间</th>
                        <th>计划结束时间</th>
                        <th>计划产量</th>
                        <th>备注</th>
                        <th style="position: sticky; right: 0; background: #fff; z-index: 1;">操作</th>
                    </tr>
                </thead>
                <tbody id="processFlowBody">
                    <!-- 初始行数据可根据需要添加 -->
                </tbody>
            </table>
            <button type="button" class="layui-btn" id="addProcessFlowRow" style="margin: 10px 0;">添加</button>
        </div>

        <!-- 附件部分 -->
        <div class="layui-form-item">
            <label class="layui-form-label">附件</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="uploadButton">选择图片上传</button>
                <input type="file" name="wenJian" id="wenJian" multiple accept="image/*" class="layui-upload-file" style="display: none;">
                <!-- 图片预览区域 -->
                <div id="imagePreview" style="margin-top: 10px; display: flex; flex-wrap: wrap;"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="submitForm">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    @*  //在html代码中添加一个隐藏的模版，用于展示物品清单表格 *@
    <script type="text/html" id="materialListTemplate">
        <div style="padding: 10px;">
            <table class="layui-table" id="materialListTable">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>物品编号</th>
                        <th>物品名称</th>
                        <th>型号型号</th>
                        <th>单位</th>
                        <th>物品类别</th>
                        <th>物品分类</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </script>

    @*  //在html代码中添加一个隐藏的模版，用于展示工艺路线清单表格 *@
    <script type="text/html" id="materialListTemplates">
        <div style="padding: 10px;">
            <table class="layui-table" id="materialListTables">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>工序编码</th>
                        <th>工序名称</th>
                        <th>加工顺序</th>
                        <th>工艺流程</th>
                        <th>负责人</th>
                        <th>所属部门</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </script>

    <!-- 引用本地 layui.js -->
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/layuiadmin/layui/layui.all.js"></script>
    <script>
        layui.use(['form', 'laydate', 'layer', 'upload'], function () {
            var form = layui.form;
            var laydate = layui.laydate;
            var layer = layui.layer;
            var upload = layui.upload; // 引入upload模块
            // 日期选择器初始化
            laydate.render({
                elem: '#workOrderDate'
            });
            laydate.render({
                elem: '#selectPlannedStartTime'
            });
            laydate.render({
                elem: '#selectPlannedEndTime'
            });

            // 生成系统编码函数
            function generateSystemNo() {
                const date = new Date();
                const random = Math.floor(Math.random() * 9000 + 1000); // 4位随机数
                return 'SCDH' +
                    date.getFullYear().toString().substr(2) +
                    (date.getMonth() + 1).toString().padStart(2, '0') +
                    date.getDate().toString().padStart(2, '0') +
                    date.getHours().toString().padStart(2, '0') +
                    date.getMinutes().toString().padStart(2, '0') +
                    date.getSeconds().toString().padStart(2, '0') +
                    random;
            }
            // 监听复选框变化
            form.on('checkbox(systemNumber)', function (data) {
                const input = $('#workOrderName');
                if (data.elem.checked) {
                    input.val(generateSystemNo())
                        .prop('readonly', true)
                        .css('background-color', '#f8f8f8');
                } else {
                    input.val('')
                        .prop('readonly', false)
                        .css('background-color', '');
                }
            });
            $('#workOrderName').val(generateSystemNo()).prop('readonly', true);



            // 初始化一个工艺流程空行
            function initEmptyRow() {
                return {
                    processCode: '',
                    processName: '',
                    processingOrder: 0,
                    processFlow: '',
                    pesponsiblePerson: '',
                    pepartment: '',
                    plannedStartDate: '',
                    plannedEndDate: '',
                    plannedQuantity: 0,
                    remarks: '',
                };
            }
            // 添加工艺流程行
            function addMaterialRow(material) {
                material = material || initEmptyRow();
                // 动态获取当前最大序号
                let currentMax = 0;
                $('#processFlowBody tr').each(function () {
                    let num = parseInt($(this).find('td:first').text());
                    if (num > currentMax) currentMax = num;
                });
                const newNumber = currentMax + 1;
                var row = '<tr>' +
                    '<td class="sticky-col" style="left: 0;">' + newNumber + '</td>' +
                    '<td><input type="text" id="processCode" name="processCode[]" class="layui-input"> <button type = "button" class="layui-btn layui-btn-xs selectMaterialButtons"> 选择工艺路线 </button> </td>' +
                    '<td><input type="text" id="processName" name="processName[]" class="layui-input"></td>' +
                    '<td><input type="number" id="processingOrder" name="processingOrder[]" class="layui-input"></td>' +
                    '<td><input type="text" id="processFlow" name="processFlow[]" class="layui-input"></td>' +
                    '<td><input type="text" id="pesponsiblePerson"  class="layui-input"></td>' +
                    '<td><input type="text" id="pepartment"  class="layui-input"></td>' +
                    '<td><input type="date" id="plannedStartDate"  class="layui-input "></td>' +
                    '<td><input type="date"  id="plannedEndDate" name="plannedEndDate[]" class="layui-input "></td>' +
                    '<td><input type="number" id="plannedQuantity" name="plannedQuantity[]" class="layui-input"></td>' +
                    '<td><input type="text" id="remarks" name="remarks[]" class="layui-input"></td>' +
                    '<td class="sticky-col" style="right: 0;">' +
                    '<button type="button" class="layui-btn layui-btn-xs move-up">上移</button>' +
                    '<button type="button" class="layui-btn layui-btn-xs move-down">下移</button>' +
                    '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-row">删除</button>' +
                    '</td>' +
                    '</tr>';
                $('#processFlowBody').append(row);
                form.render();
            }
            // 初始化一个空行
            addMaterialRow();
            // 新增生产工单按钮点击事件
            $('#addProcessFlowRow').click(function () {
                addMaterialRow();
            });


            // 上移行
            $(document).on('click', '.move-up', function () {
                var $row = $(this).closest('tr');
                if ($row.prev().length > 0) {
                    $row.prev().before($row);
                }
            });

            // 下移行
            $(document).on('click', '.move-down', function () {
                var $row = $(this).closest('tr');
                if ($row.next().length > 0) {
                    $row.next().after($row);
                }
            });

            // 删除行
            $(document).on('click', '.delete-row', function () {
                $(this).closest('tr').remove();
            });

            //物品信息弹出框
            function showMaterialList() {
                layer.open({
                    type: 1,
                    title: '选择物品',
                    area: ['800px', '500px'],
                    content: $('#materialListTemplate').html(), // 假设后面会创建一个物品清单模板
                    success: function (layero) {
                        // 调用接口获取物料数据
                        $.ajax({
                            url: 'http://localhost:5234/api/WorkOrder/GetWuPinname',
                            // url: "@ViewBag.BaseUrl/T7/WorkOrder/GetWuPinname",
                            type: 'GET',
                            success: function (res) {
                                if (res.code === 210) {
                                    var materialList = res.data;
                                    var tableBody = $('#materialListTable tbody');
                                    tableBody.empty();
                                    materialList.forEach(function (material) {
                                        var row = $('<tr>');
                                        row.append($('<td>').text(material.item_classification_detailID));
                                        row.append($('<td>').text(material.item_number));
                                        row.append($('<td>').text(material.item_name));
                                        row.append($('<td>').text(material.specification_model));
                                        row.append($('<td>').text(material.unit));
                                        row.append($('<td>').text(material.item_category));
                                        row.append($('<td>').text(material.item_classification));
                                        row.append($('<td>').html('<button class="layui-btn layui-btn-xs selectMaterialConfirm">确认</button>'));
                                        row.data('material', material);
                                        tableBody.append(row);
                                    });
                                    form.render();
                                } else {
                                    layer.msg(res.msg || '获取物料数据失败', { icon: 2 });
                                }
                            },
                            error: function (xhr, status, error) {
                                layer.msg('请求失败: ' + error, { icon: 2 });
                                console.error(xhr.responseText);
                            }
                        });
                    }
                });
            }
            //选择按钮绑定点击事件
            $(document).on('click', '.selectMaterialButton', function () {
                showMaterialList();
            });
            //处理"确定选择"按钮后的回填操作
            $(document).on('click', '.selectMaterialConfirm', function () {
                var material = $(this).closest('tr').data('material');
                $('#itemNumber').val(material.item_number);
                $('#itemName').val(material.item_classification_detailID);
                $('#specification').val(material.specification_model);
                $('#unit').val(material.unit);
                $('#itemCategory').val(material.item_category);
                $('#itemClassification').val(material.item_classification);
                form.render();
                layer.closeAll('page'); // 关闭物品清单弹窗
            });





            //工艺路线弹出框
            function showMaterialLists() {
                layer.open({
                    type: 1,
                    title: '选择工艺路线',
                    area: ['800px', '500px'],
                    content: $('#materialListTemplates').html(), // 假设后面会创建一个物品清单模板
                    success: function (layero) {
                        // 调用接口获取物料数据
                        $.ajax({
                            url: 'http://localhost:5234/api/WorkOrder/GetSCLuXian',
                            // url: "@ViewBag.BaseUrl/T7/WorkOrder/GetSCLuXian",
                            type: 'GET',
                            success: function (res) {
                                if (res.code === 210) {
                                    var materialLists = res.data;
                                    var tableBodys = $('#materialListTables tbody');
                                    tableBodys.empty();
                                    materialLists.forEach(function (material) {
                                        var row = $('<tr>');
                                        row.append($('<td>').text(material.serialNumber));
                                        row.append($('<td>').text(material.processCode));
                                        row.append($('<td>').text(material.processName));
                                        row.append($('<td>').text(material.processingOrder));
                                        row.append($('<td>').text(material.processFlow));
                                        row.append($('<td>').text(material.personInCharge));
                                        row.append($('<td>').text(material.department));
                                        row.append($('<td>').html('<button class="layui-btn layui-btn-xs selectMaterialConfirms">确认</button>'));
                                        row.data('material', material);
                                        tableBodys.append(row);
                                    });
                                    form.render();
                                } else {
                                    layer.msg(res.msg || '获取物料数据失败', { icon: 2 });
                                }
                            },
                            error: function (xhr, status, error) {
                                layer.msg('请求失败: ' + error, { icon: 2 });
                                console.error(xhr.responseText);
                            }
                        });
                    }
                });
            }
            //选择按钮绑定点击事件
            $(document).on('click', '.selectMaterialButtons', function () {
                showMaterialLists();
            });
            //处理"确定选择"按钮后的回填操作
            $(document).on('click', '.selectMaterialConfirms', function () {
                var material = $(this).closest('tr').data('material');
                $('#processCode').val(material.processCode);
                $('#processName').val(material.processName);
                $('#processingOrder').val(material.processingOrder);
                $('#processFlow').val(material.processFlow);
                $('#pesponsiblePerson').val(material.personInCharge);
                $('#pepartment').val(material.department);
                form.render();
                layer.closeAll('page'); // 关闭工艺路线清单弹窗
            });






            // 获取关联生产单号列表--下拉框
            $.ajax({
                url: 'http://localhost:5234/api/WorkOrder/GetSCDanHao', // 替换为实际的 API 地址
                // url: "@ViewBag.BaseUrl/T7/WorkOrder/GetSCDanHao",
                type: 'GET',
                success: function (res) {
                    if (res.code === 210) {
                        var productionOrderNumbers = res.data;
                        var select = $('#associatedProductionOrderNumber');
                        productionOrderNumbers.forEach(function (number) {
                            select.append('<option value="' + number.associatedProductionOrderId + '">' + number.associatedProductionName + '</option>');
                        });
                        form.render('select');
                    } else {
                        layer.msg(res.msg || '获取生产单号列表失败', { icon: 2 });
                    }
                },
                error: function (xhr, status, error) {
                    layer.msg('请求失败: ' + error, { icon: 2 });
                    console.error(xhr.responseText);
                }
            });

            // 给自定义上传按钮绑定点击事件
            $("#uploadButton").click(function () {
                $("#wenJian").click();
            });

            // 图片上传功能
            $("#wenJian").change(function () {
                var files = this.files;
                var uploadCount = 0;
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var img = $("<img>").attr({
                            src: e.target.result,
                            width: '100px',
                            height: '100px',
                            margin: '5px',
                            border: '1px solid #eee',
                            padding: '2px'
                        });
                        var progressDiv = $("<div>").addClass("upload-progress");
                        var progressBar = $("<div>").addClass("upload-progress-bar");
                        progressBar.append($("<span>"));
                        progressDiv.append(progressBar);
                        var previewItem = $("<div>").append(img).append(progressDiv);
                        $('#imagePreview').append(previewItem);

                        var formData = new FormData();
                        formData.append('file', file);

                        $.ajax({
                            url: 'http://localhost:5090/api/WrokOrder/UploadPic',
                            // url: "@ViewBag.BaseUrl/T8/WrokOrder/UploadPic",
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            xhr: function () {
                                var xhr = new XMLHttpRequest();
                                xhr.upload.addEventListener('progress', function (e) {
                                    if (e.lengthComputable) {
                                        var percentComplete = (e.loaded / e.total) * 100;
                                        progressBar.css('width', percentComplete + '%');
                                    }
                                }, false);
                                return xhr;
                            },
                            success: function (res) {
                                uploadCount++;
                                if (res.status === 200) {
                                    layer.msg('文件' + file.name + '上传成功', { icon: 1 });
                                } else {
                                    layer.msg('文件' + file.name + '上传失败：' + res.msg, { icon: 2 });
                                }
                                if (uploadCount === files.length) {
                                    layer.msg('所有文件上传完成', { icon: 1 });
                                }
                            },
                            error: function (xhr) {
                                uploadCount++;
                                layer.msg('文件' + file.name + '上传失败：' + xhr.status, { icon: 2 });
                                if (uploadCount === files.length) {
                                    layer.msg('所有文件上传完成', { icon: 1 });
                                }
                            }
                        });
                    };
                    reader.readAsDataURL(file);
                }
            });

            // 表单提交事件
            form.on('submit(submitForm)', function (data) {
                var formData = {
                    workOrderName: $('#workOrderName').val(),
                    associatedProductionOrderNumber: $('#associatedProductionOrderNumber').val(),
                    associatedProject: $('#associatedProject').val(),
                    personinCharge: $('#personinCharge').val(),
                    remarks: $('#remarks').val(),
                    salesOrder: $('#salesOrder').val(),
                    workOrderDate: $('#workOrderDate').val(),
                    affiliatedDepartment: $('#affiliatedDepartment').val(),
                    itemName: $('#itemName').val(),
                    specification: $('#specification').val(),
                    itemCategory: $('#itemCategory').val(),
                    plannedStartTime: $('#plannedStartTime').val(),
                    plannedOutput: $('#plannedOutput').val(),
                    itemNumber: $('#itemNumber').val(),
                    unit: $('#unit').val(),
                    itemClassification: $('#itemClassification').val(),
                    plannedEndTime: $('#plannedEndTime').val(),
                    wenJian: $('#wenJian').val(),
                    processFlowSheets:[]
                };
                console.log(formData);

                // 收集工序流程数据
                $('#processFlowBody  tr').each(function () {
                    var $tr = $(this);
                    var material = {
                        processCode: $tr.find('#processCode').val(),
                        processName: $tr.find('#processName').val(),
                        processingOrder: $tr.find('#processingOrder').val(),
                        processFlow: $tr.find('#processFlow').val(),
                        pesponsiblePerson: $tr.find('#pesponsiblePerson').val(),
                        pepartment: $tr.find('#pepartment').val(),
                        plannedStartDate: $tr.find('#plannedStartDate').val(),
                        plannedEndDate: $tr.find('#plannedEndDate').val(),
                        plannedQuantity: $tr.find('#plannedQuantity').val(),
                        remarks: $tr.find('#remarks').val(),
                    };
                    formData.processFlowSheets.push(material);
                });

                var loadIndex = layer.load(2);
                console.log("查看添加参数", formData);
                // 发送 AJAX 提交请求
                $.ajax({
                    url: 'http:localhost:5090/api/WrokOrder/SCWorkOrderAdd', // 替换为实际接口
                    // url: "@ViewBag.BaseUrl/T8/WrokOrder/SCWorkOrderAdd",
                    type: 'POST',
                    data: JSON.stringify(formData),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (res) {
                        layer.close(loadIndex);
                        if (res.code === 212) {                        
                            layer.msg(res.msg, { icon: 7 }, function () {
                                // 保存成功后可以跳转或刷新页面
                                location.href = "/WorkOrder/SCWorkOrderQuery"
                            });
                        } else {
                            layer.msg(res.msg || '提交失败', { icon: 2 });
                        }
                    },
                    error: function (xhr) {
                        layer.msg('网络错误：' + xhr.status, { icon: 2 });
                    }
                });

                return false; // 阻止表单默认提交
            });





        });
    </script>
</body>

</html>